<!--
 * @Author: zhangjingyu
 * @Date: 2020-12-01 17:47:57
 * @LastEditors: zhangjingyu
 * @LastEditTime: 2020-12-03 15:59:39
 * @FilePath: \vprisk-weifuwu\src\views\Others\notification.vue
 * @Description: 消息通知
-->
<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="6">
        <div>
          <el-input
            v-model="searchForm.text"
            placeholder="消息搜索..."
            @keydown.enter.native="searchFunc"
          ></el-input>
        </div>
        <vp-tree
          :data="treeData"
          :props="defaultProps"
          @node-click="handleNodeClick"
          default-expand-all
          check-strictly
          ref="configTree"
          node-key="id"
          :expand-on-click-node="false"
        ></vp-tree>
      </el-col>
      <el-col :span="18">
        <div class="cgx">
          <upper-template noIcon>
            <div slot="buttonArea">
              <el-button @click="delDraft">删除草稿</el-button>
            </div>
          </upper-template>
          <el-table
            ref="multipleTable"
            :data="tableData"
            style="width: 100%"
            @row-click="rowclick"
          >
            <el-table-column
              width="55"
              type="selection"
              fixed="left"
            ></el-table-column>
            <el-table-column prop="sender" label="发件人"> </el-table-column>
            <el-table-column prop="title" label="标题"> </el-table-column>
            <el-table-column
              prop="message.content"
              label="正文"
              :formatter="contentFormat"
            >
            </el-table-column>
            <el-table-column
              prop="sendTm"
              label="发送时间"
              :formatter="(row) => this.formatTime(row.sendTm)"
            >
            </el-table-column>
          </el-table>
          <pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            @refresh="searchFunc"
            :current="searchForm.page"
            :total="total"
          ></pagination>
        </div>
        <el-dialog
          v-dialogDrag
          :title="saveTitles[saveFlg - 1]"
          :visible.sync="addOrEdit"
          width="70%"
        >
          <el-form
            :model="saveForm"
            ref="addTreeForm"
            label-width="120px"
            label-position="left"
            :rules="saveFormRules"
          >
            <el-row>
              <el-col :span="24">
                <el-form-item label="标题：" prop="title">
                  <el-input v-model="saveForm.title" maxlength="40"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="收件人：" prop="addressee">
                  <el-input
                    v-model="saveForm.addressee"
                    readonly
                    maxlength="40"
                    suffix-icon="el-icon-date"
                      @click.native="showAddresseeList"

                  >
                    <el-button
                      slot="append"
                      icon="el-icon-search"
                    ></el-button>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="收件人机构：" prop="addresseeOrg">
                  <el-input
                    v-model="saveForm.addresseeOrg"
                    maxlength="40"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="收件人角色：" prop="addresseeRole">
                  <el-input
                    v-model="saveForm.addresseeRole"
                    type="password"
                    maxlength="40"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="发送渠道：" prop="sendChannel">
                  <el-select
                    v-model="saveForm.sendChannel"
                    placeholder="请选择发送渠道"
                  >
                    <el-option
                      v-for="item in sendChannelList"
                      :key="item.value"
                      :value="item.value"
                      :label="item.label"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="正文：" prop="content">
                  <quill-editor
                    v-model="saveForm.content"
                    ref="myQuillEditor"
                    :options="editorOption"
                    @blur="onEditorBlur($event)"
                    @focus="onEditorFocus($event)"
                    @change="onEditorChange($event)"
                  >
                  </quill-editor>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button
              type="primary"
              @click="addOrEdit = false"
              v-if="saveFlg != 3"
              >发送</el-button
            >
            <el-button @click="addOrEdit = false">保存至草稿</el-button>
          </div>
        </el-dialog>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { quillEditor } from "vue-quill-editor"; //调用编辑器
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import mement from "moment";
export default {
  components: {
    quillEditor,
  },

  data() {
    return {
      editorOption: {},
      addOrEdit: false,
      saveFlg: 1,
      searchForm: {
        text: "",
        page: 1,
        size: 15,
        type: "",
      },
      saveTitles: ["写通知", "写通知", "查看消息"],
      // 发送渠道
      sendChannelList: [
        { value: "1", label: "系统内消息" },
        { value: "2", label: "第三方邮件" },
      ],
      total: 100,
      saveForm: {
        messageId: "",
        messageType: "",
        sendFlag: "",
        status: "",
        title: "",
        addressee: "",
        addresseeOrg: "",
        addresseeOrg_text: "",
        sendChannel: "",
        content: "",
      },
      defaultProps: { label: "label", children: "children" },
      saveFormRules: {},
      treeData: [
        { id: "1", label: "全部消息", type: "1" },
        { id: "2", label: "系统消息", type: "2" },
        { id: "3", label: "代办任务", type: "3" },
        { id: "4", label: "用户邮件", type: "4" },
        { id: "5", label: "已发信息", type: "5" },
        { id: "6", label: "写邮件", type: "6" },
        { id: "7", label: "草稿箱", type: "7" },
        { id: "8", label: "消息提醒设置", type: "8" },
      ],
      tableData: [
        {
          uuid: "40288dfd70ad96fd0170ae7a68f5001f",
          message: {
            messageId: "40288dfd70ad96fd0170ae7a68df001e",
            title: "测试3333",
            content:
              "<p>\r\n\t测试\r\n</p>\r\n<p>\r\n\t6123456789345245672354253425423423424\r\n</p>",
            sendTm: 1583475222763,
            modifiedTm: null,
            sender: "sysadmin",
            addressee: "sysadmin",
            addresseeOrg: null,
            addresseeRole: null,
            status: "1",
            sendFlag: "1",
            sendChannel: "system",
            messageType: "notice",
            handleUrl: null,
            handleFlag: null,
            projectId: null,
          },
          addressee: "sysadmin",
          receiveTm: 1583475222763,
          readFlag: "1",
          title: "测试3333",
          sender: "sysadmin",
          sendTm: 1583475222763,
          content:
            "<p>\r\n\t测试\r\n</p>\r\n<p>\r\n\t6123456789345245672354253425423423424\r\n</p>",
        },
      ],
      editorOption: {
              placeholder: "请在这里输入",
              modules:{
                toolbar:[
                          ['bold', 'italic', 'underline', 'strike'],    //加粗，斜体，下划线，删除线
                          ['blockquote', 'code-block'],     //引用，代码块
                          [{ 'header': 1 }, { 'header': 2 }],        // 标题，键值对的形式；1、2表示字体大小
                          [{ 'list': 'ordered'}, { 'list': 'bullet' }],     //列表
                          [{ 'script': 'sub'}, { 'script': 'super' }],   // 上下标
                          [{ 'indent': '-1'}, { 'indent': '+1' }],     // 缩进
                          [{ 'direction': 'rtl' }],             // 文本方向
                          [{ 'size': ['small', false, 'large', 'huge'] }], // 字体大小
                          [{ 'header': [1, 2, 3, 4, 5, 6, false] }],     //几级标题
                          [{ 'color': [] }, { 'background': [] }],     // 字体颜色，字体背景颜色
                          [{ 'font': [] }],     //字体
                          [{ 'align': [] }],    //对齐方式
                          ['clean'],    //清除字体样式
                          ['image']    //上传图片、上传视频
                          ]
                      }
                },
    };
  },
  mounted() {
  },
  methods: {
    searchFunc() {},
    // 获取用户列表
    showAddresseeList() {},
    rowclick(row) {
      this.saveForm = { ...row };
      this.addOrEdit = true;
    },
    handleNodeClick(obj) {},
    contentFormat(row) {
      let str = row.message.content.replace(/<[^<>]+>/g, "");
      return str.length > 30 ? str.substr(0, 30) + "..." : str;
    },
    formatTime(val) {
      return val ? mement(val).format("yyyy-MM-DD HH:MM:SS") : "";
    },
    delDraft() {
      let selection = this.$refs.multipleTable.selection;
      if (selection.length < 1) {
        return this.$message.warning("请选择要删除的信息");
      }
      this.$confirm("你确定要删除选中的邮件吗?！", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message.success("删除成功");
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    onEditorReady(editor) {
      // 准备编辑器
    },
    onEditorBlur() {
      // 失去焦点事件
    },
    onEditorFocus() {
      // 获得焦点事件
    },
    onEditorChange() {
      // 内容改变事件
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.searchForm.szie = val;
      this.searchFunc();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.searchForm.page = val;
      this.searchFunc();
    },
  },
};
</script>

<style lang="scss" scoped>
</style>